<!-- 我的砍价 -->
<template>
    <view class="myPage">
        <status-bar title='我的砍价' :goHome='fromShare'></status-bar>
        <view class="classNav flexac" :style="{top: totalHeight+'px'}">
            <u-tabs :list="tabList" :lineColor="color" lineWidth="30" @click="tabClick" itemStyle="height: 50px;"
                :inactiveStyle="{color:'#777',fontSize:'30rpx',transform:'scale(1)'}"
                :activeStyle="{color:'#444',fontSize:'30rpx',fontWeight:'bold',transform:'scale(1.2)'}"></u-tabs>
        </view>
        <view class="p-top150 p-left30 p-right30">
            <view class="item bgwhite bor_radius_6 m-bot30 padding20 d-flex" v-for="item in 3" :key="item">
                <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" class="img"></image>
                <view class="padding12-30 flex-1">
                    <view class="size28 color_22 ellipsis">商品名称商品名称商品名称商品名称</view>
                    <!-- 砍价中 -->
                    <view class="m-top14" v-if="item == 0">
                        <!-- 倒计时 -->
                        <u-count-down :time="30 * 60 * 60 * 1000" @change="onChange">
                            <view class="d-flex a-center">
                                <view class="count">{{ timeData.hours<10?'0'+timeData.hours:timeData.hours }}</view>
                                <text class="dot">:</text>
                                <view class="count">{{ timeData.minutes<10?'0'+timeData.minutes:timeData.minutes }}</view>
                                <text class="dot">:</text>
                                <view class="count">{{ timeData.seconds<10?'0'+timeData.seconds:timeData.seconds }}</view>
                                <text class="size22 color_44 m-left14">后砍价过期</text>
                            </view>
                        </u-count-down>
                        <view class="m-top14 m-bot14">
                            <u-line-progress :percentage="50" inactiveColor="#FFDBDE" height="7" :showText="false"></u-line-progress>
                        </view>
                        <view class="size22 color_44">
                            已砍<text class="price bold p-left6 p-right6">1099</text>元，还差
                            <text class="price bold p-left6 p-right6">69</text>元好礼带回家
                        </view>
                    </view>
                    <!-- 已成功 -->
                    <view class="m-top20" v-if="item == 1">
                        <u-line-progress :percentage="100" inactiveColor="#FFDBDE" height="7" :showText="false"></u-line-progress>
                        <view class="h6 bold m-top20 m-bot10" style="color: #810000;">砍价已成功<!-- 已成功领取 --></view>
                        <view class="d-flex j-sb a-center">
                            <view class="size22 color_44">砍价成功，免费好礼带回家</view>
                            <view class="btn bor_radius_6 size22 white text-center">点击领取<!-- 查看订单 --></view>
                        </view>
                    </view>
                    <!-- 已失败 -->
                    <view class="p-top24" v-if="item == 2">
                        <view class="h6 m-bot20" style="color: #F73F3F;">很遗憾，砍价因超时失败</view>
                        <u-line-progress :percentage="0" inactiveColor="#FFDBDE" height="7" :showText="false"></u-line-progress>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            tabList: [
                { name: '砍价中' },
                { name: '已成功' },
                { name: '已失败' }
            ],
            timeData: {}
        }
    },
    computed: {
        ...mapState(['color','totalHeight'])
    },
    methods: {
        tabClick({index}){
            console.log(index)
        },
        onChange(e){
            this.timeData = e
        }
    }
}
</script>

<style lang="scss" scoped>
.myPage {
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
.classNav {
    position: fixed;
    left: 0;
    z-index: 10;
    width: 100%;
}
.item {
    width: 100%;
    height: 220rpx;
    box-shadow: 4rpx 4rpx 13rpx 1rpx rgba(0,0,0,0.13);
    .img {
        width: 180rpx;
        height: 180rpx;
    }
    .count {
        width: 36rpx;
        line-height: 36rpx;   
        background: #FFD0A0;
        color: #810000;
        font-weight: bold;
        text-align: center;
    }
    .dot {
        font-size: 28rpx;
        color: #810000;
        font-weight: bold;
        margin: 0 10rpx;
    }
    .price {
        color: #FF464E;
    }
    .btn {
        width: 100rpx;
        line-height: 36rpx;    
        background: linear-gradient(-90deg, #F41C26, #FFA35E);
    }
}
/deep/ .u-line-progress__line {
    background: linear-gradient(-90deg, #F41C26, #FFB47B);
}
</style>